<template>
	<div class="index-container">
		<yd-form class="" :options="formOptions" :model="formData1" @form-init="formInit" @change="handleChange"> </yd-form>
		<div class="chart-box">
			<!-- 第二行 -->
			<el-row :gutter="10" class="chart-box-item">
				<!-- 访问量趋势 -->
				<el-col :span="12" style="height: 100%">
					<div v-loading="loading.visitTrend" class="chart-container">
						<div v-show="icon.indexVisit.show" class="index-icon-container">
							<svg-icon :icon-class="icon.indexVisit.name" class="index-icon"></svg-icon>
						</div>
						<div v-show="icon.indexVisit.noDataText" class="no-data-text">暂无数据</div>
						<div id="visitTrendChartId" style="height: 98%"></div>
						<el-link v-show="icon.indexVisit.show" class="detail-link" @click="jumpToVisitDistributeDetail">详情 ></el-link>
					</div>
				</el-col>
				<!-- 告警访问量趋势 -->
				<el-col :span="12" style="height: 100%; position: relative">
					<div v-loading="loading.alarmTrend" class="chart-container">
						<div v-show="icon.indexAlarm.show" class="index-icon-container">
							<svg-icon :icon-class="icon.indexAlarm.name" class="index-icon"></svg-icon>
						</div>
						<div v-show="icon.indexAlarm.noDataText" class="no-data-text">暂无数据</div>
						<div id="alarmTrendChartId" style="height: 98%"></div>
						<el-link v-show="icon.indexAlarm.show" class="detail-link" @click="jumpToVisitAlarmMap">详情 ></el-link>
					</div>
				</el-col>
			</el-row>
			<!-- 第三行 -->
			<el-row :gutter="10" class="chart-box-item">
				<!-- 健康度趋势 -->
				<el-col :span="12" style="height: 100%">
					<div v-loading="loading.healthRatioTrend" class="chart-container">
						<div v-show="icon.indexHealthRatio.show" class="index-icon-container">
							<svg-icon :icon-class="icon.indexHealthRatio.name" class="index-icon"></svg-icon>
						</div>
						<div v-show="icon.indexHealthRatio.noDataText" class="no-data-text">暂无数据</div>
						<div id="healthRatioTrendChartId" style="height: 98%"></div>
					</div>
				</el-col>
				<!-- 平均响应时长趋势 -->
				<el-col :span="12" style="height: 100%">
					<div v-loading="loading.avgDealTimeTrend" class="chart-container">
						<div v-show="icon.indexAvgDealTime.show" class="index-icon-container">
							<svg-icon :icon-class="icon.indexAvgDealTime.name" class="index-icon"></svg-icon>
						</div>
						<div v-show="icon.indexAvgDealTime.noDataText" class="no-data-text">暂无数据</div>
						<div id="avgDealTimeTrendChartId" style="height: 98%"></div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onActivated, getCurrentInstance, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import echarts from '@/utils/echarts';
import { Pagination, A11y, Autoplay, Navigation } from 'swiper';

import useCommonStore from '@/store/modules/common';
import { getConfigKey } from '@/api/management/systemManage/systemConfig';
import { querySystemVisitTrend, querySystemAvgDealTimeTrend, querySystemHealthRatioTrend, querySystemAlarmTrend } from '@/api/bpm/home/index';

import { indexChartStyle, noDataOption } from '@/utils/defaultChartConfig';
import { parseTime, splitTimeRangeAndCompleZero3, replaceNullWithZero } from '@/utils/common';

const instance = getCurrentInstance();
const proxy = instance?.proxy;
const indexSwiper = ref(null);
const router = useRouter();
const route = useRoute();

const labelTimeLen = useCommonStore().labelTimeLen || 10;

//   swiper的组件
const modules = [Pagination, A11y, Autoplay, Navigation];

// 当前日期对象
const currentDate = ref(new Date());
// 图表统一样式
const chartStyle = indexChartStyle();

// 关键系统列表
const keySystemList = ref<Array<anyObj>>([]);
// 当前展示系统索引
const currentIndex = ref(0);
// 图表对象
const chart: anyObj = {};
// 加载层
const loading = reactive({
	visitTrend: false,
	avgDealTimeTrend: false,
	healthRatioTrend: false,
	alarmTrend: false,
});
// 图标
const icon = reactive({
	indexVisit: {
		name: 'index_visit',
		show: false,
		noDataText: false,
	},
	indexAlarm: {
		name: 'index_alarm',
		show: false,
		noDataText: false,
	},
	indexHealthRatio: {
		name: 'index_health_ratio',
		show: false,
		noDataText: false,
	},
	indexAvgDealTime: {
		name: 'index_avg_deal_time',
		show: false,
		noDataText: false,
	},
});
// 定时器
const interval = reactive<Record<string, any>>({
	obj: null,
	refreshTime: 10,
});

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		attrs: {
			clearable: false,
		},
	},
]);

const formData1 = reactive<FormModelType>({});

const formData = reactive({
	startTime: parseTime(currentDate.value.getTime(), '{y}-{m}-{d}') + ' 00:00:00',
	endTime: parseTime(currentDate.value.getTime(), '{y}-{m}-{d} {h}:{i}:00'),
	currentDate: parseTime(currentDate.value.getTime(), '{y}{m}{d}'),
});

const visitTrendData = ref<any[]>([]);
const healthRatioData = ref<any[]>([]);

// resize方法

watch(
	() => useCommonStore().sidebar.collapse,
	() => {
		// 监听侧边栏收缩展开状态=>
		setTimeout(() => {
			monirotWindowResize();
		}, 300);
	}
);
// resizeMixins()
onMounted(() => {
	if (route.query.systemId) {
		formData1.systemId = route.query.systemId;
	}
	initChart();
	// 监听窗口尺寸变化
	window.addEventListener('resize', monirotWindowResize);
});

onActivated(() => {
	monirotWindowResize();
});

onBeforeUnmount(() => {
	// 确保定时器已销毁
	clearInterval(interval.obj);
});

function handleChange() {
	if (formData1.systemId) {
		renderChart();
	}
}

function formInit() {
	console.log('forminit', route.query.systemId);
	if (route.query.systemId) {
		formData1.systemId = route.query.systemId;
	}
	// 初始化图表对象

	// 渲染图表
	renderChart();

	// // 监听窗口尺寸变化
	// window.addEventListener('resize', monirotWindowResize);
}

// 初始化图表对象
function initChart() {
	chart['visitTrendChart'] = echarts.init(document.getElementById('visitTrendChartId') as HTMLElement);
	chart['avgDealTimeTrendChart'] = echarts.init(document.getElementById('avgDealTimeTrendChartId') as HTMLElement);
	chart['healthRatioTrendChart'] = echarts.init(document.getElementById('healthRatioTrendChartId') as HTMLElement);
	chart['alarmTrendChart'] = echarts.init(document.getElementById('alarmTrendChartId') as HTMLElement);
	// console.log('chart',chart)
	echarts.connect([chart['visitTrendChart'], chart['avgDealTimeTrendChart'], chart['healthRatioTrendChart'], chart['alarmTrendChart']]);
}
// 监听窗口尺寸变化
function monirotWindowResize() {
	// 重新渲染布局
	caclChartContainer();
}
// 计算设置图表宽高
function caclChartContainer() {
	console.log(';;11');
	setTimeout(() => {
		for (let c in chart) {
			chart[c] &&
				chart[c].resize({
					width: chart[c]._dom.clientWidth,
				});
		}
	}, 50);
}
// 渲染当前系统趋势图
function renderChart() {
	queryRenderAvgDealTimeTrendChart();
	queryRenderAlarmTrendChart();
	Promise.all([queryHealthRatioTrendChart(), queryRenderVisitTrendChart()]).then((res: any) => {
		console.log('promiseall', res);
		renderHealthRatioTrendChart(chart['healthRatioTrendChart'], healthRatioData.value, res[0].trendStartTime, res[0].trendEndTime);
	});
}
// 渲染访问量趋势
function queryRenderVisitTrendChart() {
	console.log('rendervisitTrend');
	loading.visitTrend = true;
	return new Promise((resolve, reject) => {
		querySystemVisitTrend({ ...formData, ...formData1 }).then((res) => {
			loading.visitTrend = false;

			const chartObj = chart['visitTrendChart'];

			// 清空图表
			chartObj && chartObj.clear();

			if (res.code !== 0) {
				proxy?.$message.warning(res.msg);
			}

			// 无数据时显示
			if (res.code !== 0 || !res.data.trendData || res.data.trendData.list?.length === 0) {
				icon.indexVisit.show = true;
				icon.indexVisit.noDataText = false;
				noDataOption(chartObj, {
					// 主标题
					text: '业务访问量',
					// 副标题
					subtext: '(-/总量)',
					...chartStyle.titleStyle,
				});
				return;
			}
			resolve('');

			// 数据转换
			let total = 0;

			let list = res.data.trendData?.list;
			if (list instanceof Array) {
				list.pop();
			}
			visitTrendData.value = list;
			// null替换成0
			replaceNullWithZero(list);
			list.forEach((r: any) => {
				const cVal = parseInt(r.currentValue);
				total += cVal;
			});
			const compleRes = splitTimeRangeAndCompleZero3(res.data.trendStartTime, res.data.trendEndTime, labelTimeLen, list);
			let labelTimeArr = compleRes.labelTimeArr;
			let o = compleRes.o || {};

			// 有数据时显示
			const colorList = chartStyle.common.color;
			icon.indexVisit.show = true;
			icon.indexVisit.noDataText = false;
			chartObj.setOption({
				// 全局统一样式
				...chartStyle.common,
				// 标题
				title: {
					// 主标题
					text: '业务访问量',
					// 副标题
					subtext: '(' + total + '/总量)',
					...chartStyle.titleStyle,
				},
				// 提示框
				tooltip: {
					trigger: 'axis',
				},
				// 图例
				legend: {
					data: ['当前值', '上日值', '上轨', '下轨'],
					...chartStyle.legendStyle,
				},
				// x轴
				xAxis: {
					type: 'category',
					data: labelTimeArr,
					...chartStyle.xAxisStyle,
				},
				// y轴
				yAxis: {
					type: 'value',
					...chartStyle.yAxisStyle,
				},
				// 坐标系位置
				grid: {
					...chartStyle.grid,
				},
				// 数据
				series: [
					{
						name: '当前值',
						type: 'line',
						data: o.currentValueArr,
						smooth: true,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: colorList[0] },

								{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
							]),
						},
					},
					{
						name: '上日值',
						type: 'line',
						data: o.yesterdayValueArr,
						smooth: true,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: colorList[1] },
								{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
							]),
						},
					},
					{
						name: '上轨',
						type: 'line',
						data: o.maxValueArr,
						smooth: true,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: colorList[2] },
								{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
							]),
						},
					},
					{
						name: '下轨',
						type: 'line',
						data: o.minValueArr,
						smooth: true,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: colorList[3] },
								{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
							]),
						},
					},
				],
			});
		});
	});
}

// 渲染告警访问量趋势
function queryRenderAlarmTrendChart() {
	loading.alarmTrend = true;
	querySystemAlarmTrend({ ...formData, ...formData1 }).then((res) => {
		loading.alarmTrend = false;

		const chartObj = chart['alarmTrendChart'];
		// 清空图表
		chartObj && chartObj.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
		}

		// 无数据时显示
		if (res.code !== 0 || res.data.trendData.length === 0) {
			icon.indexAlarm.show = true;
			icon.indexAlarm.noDataText = false;
			noDataOption(chartObj, {
				// 主标题
				text: '业务告警访问量',
				// 副标题
				subtext: '(-/总量)',
				...chartStyle.titleStyle,
			});
			return;
		}

		// 数据转换
		let total = 0;
		if (res.data.trendData instanceof Array) {
			res.data.trendData.pop();
		}
		// null替换成0
		replaceNullWithZero(res.data.trendData);
		res.data.trendData.forEach((r: anyObj) => {
			const cVal = parseInt(r.currentValue);
			total += cVal;
		});
		const compleRes = splitTimeRangeAndCompleZero3(res.data.trendStartTime, res.data.trendEndTime, labelTimeLen, res.data.trendData);
		let labelTimeArr = compleRes.labelTimeArr;
		let o = compleRes.o || {};

		// 有数据时显示
		const colorList = chartStyle.common.color;
		icon.indexAlarm.show = true;
		icon.indexAlarm.noDataText = false;
		chartObj.setOption({
			// 全局统一样式
			...chartStyle.common,
			// 标题
			title: {
				// 主标题
				text: '业务告警访问量',
				// 副标题
				subtext: '(' + total + '/总量)',
				...chartStyle.titleStyle,
			},
			// 提示框
			tooltip: {
				trigger: 'axis',
			},
			// 图例
			legend: {
				data: ['当前值', '上日值', '上轨', '下轨'],
				...chartStyle.legendStyle,
			},
			// x轴
			xAxis: {
				type: 'category',
				data: labelTimeArr,
				...chartStyle.xAxisStyle,
			},
			// y轴
			yAxis: {
				type: 'value',
				...chartStyle.yAxisStyle,
			},
			// 坐标系位置
			grid: {
				...chartStyle.grid,
			},
			// 数据
			series: [
				{
					name: '当前值',
					type: 'line',
					data: o.currentValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[0] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '上日值',
					type: 'line',
					data: o.yesterdayValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[1] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '上轨',
					type: 'line',
					data: o.maxValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[2] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '下轨',
					type: 'line',
					data: o.minValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[3] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
			],
		});
	});
}
// 请求健康度趋势
function queryHealthRatioTrendChart() {
	loading.healthRatioTrend = true;
	return new Promise((resolve) => {
		querySystemHealthRatioTrend({ ...formData, ...formData1 }).then((res) => {
			loading.healthRatioTrend = false;

			const chartObj = chart['healthRatioTrendChart'];
			// 清空图表
			chartObj && chartObj.clear();
			if (res.code !== 0) {
				proxy?.$message.warning(res.msg);
			}

			// 无数据时显示
			if (res.code !== 0 || res.data.trendData.length === 0) {
				icon.indexHealthRatio.show = true;
				icon.indexHealthRatio.noDataText = false;
				noDataOption(chartObj, {
					// 主标题
					text: '业务健康度',
					// 副标题
					subtext: '(-/百分比)',
					...chartStyle.titleStyle,
				});
				return;
			}
			healthRatioData.value = res.data.trendData;
			resolve({
				trendStartTime: res.data.trendStartTime,
				trendEndTime: res.data.trendEndTime,
			});
		});
	});
}

// 处理健康度的数据，
// 当前值业务访问量<上轨*30%时，健康度趋势图默认不展示上下轨数据
function dealHealthRatioTrendData(visitTrendData: any[], healthRatioData: any[]) {
	let timeArr: any[] = [];
	visitTrendData.forEach((item: any) => {
		if (item.currentValue < item.maxValue * 0.3) {
			let str: string = item.labelTime;

			// let str: string = parseTime(item.labelTime.substring(0, 19), '{h}:{i}');
			timeArr.push(str);
		}
	});
	healthRatioData.forEach((item: any, index: number) => {
		if (timeArr.indexOf(item.labelTime) > -1 && item.maxValue !== undefined) {
			// 将上轨值和下轨值清空
			item.maxValue = null;
			item.minValue = null;
		}
	});
	console.log('dealHealthRatioTrendData-------', timeArr);
	console.log('healthRatioData-------', healthRatioData);
}

// 渲染健康度趋势
function renderHealthRatioTrendChart(chartObj: any, trendData: any[], trendStartTime: string, trendEndTime: string) {
	// 数据转换
	let s1 = 0,
		s2 = 0;
	// 设置数据数组，并进行补零操作
	if (trendData instanceof Array) {
		trendData.pop();
	}
	// 用0
	replaceNullWithZero(trendData);

	trendData.forEach((r: anyObj) => {
		const t1 = parseInt(r.sumAvgCount),
			t2 = parseInt(r.sumCount);
		if (!isNaN(t1) && !isNaN(t2)) {
			s1 += t1;
			s2 += t2;
		}
		r.currentValue = parseFloat(r.currentValue).toFixed(2);
		r.yesterdayValue = parseFloat(r.yesterdayValue).toFixed(2);
		r.minValue = parseFloat(r.minValue).toFixed(2);
		r.maxValue = parseFloat(r.maxValue).toFixed(2);
	});
	const compleRes = splitTimeRangeAndCompleZero3(trendStartTime, trendEndTime, labelTimeLen, trendData);
	const labelTimeArr = compleRes.labelTimeArr;
	const o = compleRes.o;

	//
	dealHealthRatioTrendData(visitTrendData.value, trendData);

	// 有数据时显示
	const colorList = chartStyle.common.color;
	icon.indexHealthRatio.show = true;
	icon.indexHealthRatio.noDataText = false;

	chartObj.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			// 主标题
			text: '业务健康度',
			// 副标题
			subtext: '(' + (s2 === 0 ? 0 : (((s2 - s1) / s2) * 100).toFixed(2)) + '%/百分比)',
			...chartStyle.titleStyle,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['当前值', '上日值', '上轨', '下轨'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: labelTimeArr,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '当前值',
				type: 'line',
				data: o.currentValueArr,
				smooth: true,
				areaStyle: {
					// normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colorList[0] },
						{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
					]),
					// },
				},
			},
			{
				name: '上日值',
				type: 'line',
				data: o.yesterdayValueArr,
				smooth: true,
				areaStyle: {
					// normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colorList[1] },
						{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
					]),
					// },
				},
			},
			{
				name: '上轨',
				type: 'line',
				data: o.maxValueArr,
				smooth: true,
				areaStyle: {
					// normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colorList[2] },
						{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
					]),
					// },
				},
			},
			{
				name: '下轨',
				type: 'line',
				data: o.minValueArr,
				smooth: true,
				areaStyle: {
					// normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colorList[3] },
						{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
					]),
					// },
				},
			},
		],
	});
}

// 渲染平均响应时长趋势
function queryRenderAvgDealTimeTrendChart() {
	loading.avgDealTimeTrend = true;
	querySystemAvgDealTimeTrend({ ...formData, ...formData1 }).then((res) => {
		loading.avgDealTimeTrend = false;

		const chartObj = chart['avgDealTimeTrendChart'];

		// 清空图表
		chartObj && chartObj.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
		}

		// 无数据时显示
		if (res.code !== 0 || res.data.trendData.length === 0) {
			icon.indexAvgDealTime.show = true;
			icon.indexAvgDealTime.noDataText = false;
			noDataOption(chartObj, {
				// 主标题
				text: '业务办理时长',
				// 副标题
				subtext: '(-/毫秒)',
				...chartStyle.titleStyle,
			});
			return;
		}

		// 数据转换
		let s1 = 0,
			s2 = 0;
		// 设置数据数组，并进行补零操作
		if (res.data.trendData instanceof Array) {
			res.data.trendData.pop();
		}
		// null替换成0
		replaceNullWithZero(res.data.trendData);
		res.data.trendData.forEach((r: anyObj) => {
			const t1 = parseInt(r.sumAvgCount),
				t2 = parseInt(r.sumCount);
			if (!isNaN(t1) && !isNaN(t2)) {
				s1 += t1;
				s2 += t2;
			}
			r.yesterdayValue = (parseFloat(r.yesterdayValue) / 1000).toFixed(2);
			r.maxValue = (parseFloat(r.maxValue) / 1000).toFixed(2);
			r.minValue = (parseFloat(r.minValue) / 1000).toFixed(2);
			r.currentValue = (parseFloat(r.currentValue) / 1000).toFixed(2);
		});
		const compleRes = splitTimeRangeAndCompleZero3(res.data.trendStartTime, res.data.trendEndTime, labelTimeLen, res.data.trendData);
		let labelTimeArr = compleRes.labelTimeArr;
		let o = compleRes.o || {};

		// 有数据时显示
		const colorList = chartStyle.common.color;
		icon.indexAvgDealTime.show = true;
		icon.indexAvgDealTime.noDataText = false;
		chartObj.setOption({
			// 全局统一样式
			...chartStyle.common,
			// 标题
			title: {
				// 主标题
				text: '业务办理时长',
				// 副标题
				subtext: '(' + (s2 === 0 ? 0 : (s1 / s2 / 1000).toFixed(2)) + '/毫秒)',
				...chartStyle.titleStyle,
			},
			// 提示框
			tooltip: {
				trigger: 'axis',
			},
			// 图例
			legend: {
				data: ['当前值', '上日值', '上轨', '下轨'],
				...chartStyle.legendStyle,
			},
			// x轴
			xAxis: {
				type: 'category',
				data: labelTimeArr,
				...chartStyle.xAxisStyle,
			},
			// y轴
			yAxis: {
				type: 'value',
				...chartStyle.yAxisStyle,
			},
			// 坐标系位置
			grid: {
				...chartStyle.grid,
			},
			// 数据
			series: [
				{
					name: '当前值',
					type: 'line',
					data: o.currentValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[0] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '上日值',
					type: 'line',
					data: o.yesterdayValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[1] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '上轨',
					type: 'line',
					data: o.maxValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[2] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
				{
					name: '下轨',
					type: 'line',
					data: o.minValueArr,
					smooth: true,
					areaStyle: {
						// normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colorList[3] },
							{ offset: 1, color: 'rgba(255, 255, 127, 0)' },
						]),
						// },
					},
				},
			],
		});
	});
}
// 跳转至访问量分布详情
function jumpToVisitDistributeDetail() {
	router.push({
		path: '/business-monitor/home/visit-distribte-detail',
		query: {
			systemId: formData1.systemId,
			currentTime: formData.endTime,
		},
	});
}
// 跳转至访问告警分布图
function jumpToVisitAlarmMap() {
	router.push({
		path: '/business-monitor/home/alarm-distribute-map',
		query: {
			systemId: formData1.systemId,
			currentTime: formData.endTime,
		},
	});
}
// 启动定时刷新器
function startRefreshInterval() {
	interval.obj = setInterval(() => {
		// 刷新当前日期
		currentDate.value = new Date();
		formData.currentDate = parseTime(currentDate.value.getTime(), '{y}{m}{d}');
		(formData.startTime = parseTime(currentDate.value.getTime(), '{y}-{m}-{d}') + ' 00:00:00'),
			(formData.endTime = parseTime(currentDate.value.getTime(), '{y}-{m}-{d} {h}:{i}:00')),
			// 渲染当前系统趋势图
			renderChart();
	}, 1000 * interval.refreshTime);
}
</script>

<style rel="stylesheet/scss" lang="scss">
.index-container {
	padding: 16px 16px 16px 16px;
	position: relative;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 84px - 50px);
	.chart-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		.chart-box-item {
			// height: 48%;
			flex: 1;
			// margin-t/op: 1%;
		}
		.chart-box-item:first-child {
			margin-bottom: 10px;
		}
	}

	/* 标题 */
	.system-title {
		text-align: center;
		font-family: 'PingFang';
		font-size: 28px;
		text-shadow: 3px 3px 9px #01153b;
		height: 60px;
	}

	/* 第二行 */
	.second-row {
		margin-bottom: 10px;
	}

	/* 加载层 */
	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.chart-container {
		position: relative;
		padding: 10px;
		height: 100%;
		// background-image: url('../assets/images/bpm/modules/home/index_chart_background.png');
		// background-repeat: no-repeat;
		// background-position: center;
		// background-size: 100% 100%;
		background-color: rgba(29, 39, 75, 0.31);
		border-radius: 20px;
	}

	.index-icon-container {
		position: absolute;
		left: 60px;
		top: 30px;

		.index-icon {
			color: #2beded;
			margin-right: 10px;
			font-size: 30px;
		}
	}

	/* 详情链接 */
	.detail-link {
		color: #ffffff;
		font-size: 14px;
		text-decoration: underline;
		position: absolute;
		top: 20px;
		right: 50px;
	}

	/* swiper分页圆点样式 */
	.swiper-pagination-bullet {
		background: #fff;
	}
	.swiper-pagination-bullet-active {
		background: #007aff;
	}

	.no-data-text {
		position: absolute;
		left: 50%;
		top: 50%;
		color: #ffffff4d;
	}
}
</style>
